<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in lunbolist"
        :key="item.id"
      >
        <img
          :src="item.img"
          alt=""
        >
      </van-swipe-item>
    </van-swipe>

    <!-- 九宫格 -->
    <van-grid
      class="my-grids"
      :column-num="3"
    >
      <van-grid-item
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.src"
        :text="grid.title"
        :to="grid.to"
      />
    </van-grid>
  </div>
</template>
<script>
// import axios from 'axios'
// import { getLunbo, getGrids } from '../../api'
export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created() {
    // console.log(getLunbo)
    // this.Api.getLunbo().then(res => {
    //   console.log(res)
    // })
    this.getLunbo()
    this.getGrids()
  },
  methods: {

    // getLunbo() {
    //   axios.get('http://203.195.181.208:8888/api/getlunbo').then(res => {
    //     console.log(res)
    //     const { data: { status, message } } = res
    //     if (status !== 0) return console.log(message)
    //     this.lunbolist = message
    //   })
    // }

    async getLunbo() {
      try {
        const res = await this.Api.getLunbo()
        const { data: { message } } = res
        this.lunbolist = message
      } catch (error) {
        this.$Toast(error)
      }
    },
    async getGrids() {
      try {
        const res = await this.Api.getGrids()
        const { data: { message } } = res
        this.grids = message
      } catch (error) {
        this.$Toast(error)
      }
    }
  }
}
</script>
<style lang="less" >
// lang 设置使用某个预编译语言
// scoped 限制当前样式只能在当前组件使用
.home {
  .my-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .my-grids {
    .van-grid-item__icon {
      font-size: 60px;
    }
  }
}
</style>
